<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单处理指南</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-orange-600 to-red-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-help-center.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">订单处理指南</h1>
                <button onclick="viewOrderDemo()" class="text-white hover:opacity-80">
                    <i class="fas fa-play text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Order Status Overview -->
        <div class="px-4 py-3 bg-gradient-to-r from-orange-600 to-red-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="flex items-center text-white">
                    <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-shopping-cart text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h3 class="font-bold text-lg">发货售后流程</h3>
                        <p class="text-sm opacity-90 mt-1">高效处理订单，提升客户满意度</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs opacity-80">平均处理</p>
                        <p class="text-lg font-semibold">2.3小时</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-24">
            <!-- Order Workflow -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    订单处理流程
                </h3>
                <div class="space-y-4">
                    <!-- Flow Step 1 -->
                    <div class="workflow-step bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
                                <span class="text-blue-600 font-bold text-sm">1</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-blue-800 mb-2">接收新订单</h4>
                                <div class="space-y-2 text-sm text-gray-600">
                                    <p>• 系统自动通知新订单到达</p>
                                    <p>• 检查订单信息和支付状态</p>
                                    <p>• 确认商品库存是否充足</p>
                                </div>
                                <div class="bg-blue-50 rounded-lg p-3 mt-3">
                                    <div class="flex items-center text-sm text-blue-700">
                                        <i class="fas fa-clock mr-2"></i>
                                        <span>建议处理时间：15分钟内确认</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ml-13 mt-3">
                            <button onclick="practiceStep('receive')" class="bg-blue-50 text-blue-600 text-xs px-3 py-1.5 rounded-lg hover:bg-blue-100 transition-colors">
                                实操演示
                            </button>
                        </div>
                    </div>

                    <!-- Flow Step 2 -->
                    <div class="workflow-step bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1">
                                <span class="text-green-600 font-bold text-sm">2</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-green-800 mb-2">确认订单</h4>
                                <div class="space-y-2 text-sm text-gray-600">
                                    <p>• 核对商品规格、数量、价格</p>
                                    <p>• 确认收货地址和联系方式</p>
                                    <p>• 特殊要求备注处理</p>
                                </div>
                                <div class="grid grid-cols-2 gap-2 mt-3">
                                    <div class="bg-green-50 rounded-lg p-2">
                                        <p class="text-xs text-green-700 font-medium">✓ 正常订单</p>
                                        <p class="text-xs text-green-600">直接确认处理</p>
                                    </div>
                                    <div class="bg-yellow-50 rounded-lg p-2">
                                        <p class="text-xs text-yellow-700 font-medium">⚠ 异常订单</p>
                                        <p class="text-xs text-yellow-600">联系客户确认</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ml-13 mt-3">
                            <button onclick="practiceStep('confirm')" class="bg-green-50 text-green-600 text-xs px-3 py-1.5 rounded-lg hover:bg-green-100 transition-colors">
                                查看案例
                            </button>
                        </div>
                    </div>

                    <!-- Flow Step 3 -->
                    <div class="workflow-step bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3 mt-1">
                                <span class="text-orange-600 font-bold text-sm">3</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-orange-800 mb-2">备货发货</h4>
                                <div class="space-y-2 text-sm text-gray-600">
                                    <p>• 仓库拣货、打包</p>
                                    <p>• 选择合适的物流方式</p>
                                    <p>• 填写快递单号</p>
                                    <p>• 更新订单状态为"已发货"</p>
                                </div>
                                <div class="bg-orange-50 rounded-lg p-3 mt-3">
                                    <h5 class="text-sm font-medium text-orange-800 mb-2">打包注意事项：</h5>
                                    <ul class="text-xs text-orange-700 space-y-1">
                                        <li>• 易碎品需要防震包装</li>
                                        <li>• 检查商品完整性</li>
                                        <li>• 附上发票或小票</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="ml-13 mt-3">
                            <button onclick="practiceStep('ship')" class="bg-orange-50 text-orange-600 text-xs px-3 py-1.5 rounded-lg hover:bg-orange-100 transition-colors">
                                打包指南
                            </button>
                        </div>
                    </div>

                    <!-- Flow Step 4 -->
                    <div class="workflow-step bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3 mt-1">
                                <span class="text-purple-600 font-bold text-sm">4</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-purple-800 mb-2">跟踪配送</h4>
                                <div class="space-y-2 text-sm text-gray-600">
                                    <p>• 监控物流进度</p>
                                    <p>• 主动告知客户物流信息</p>
                                    <p>• 处理配送异常情况</p>
                                    <p>• 确认客户收货</p>
                                </div>
                                <div class="grid grid-cols-3 gap-2 mt-3 text-xs">
                                    <div class="bg-blue-50 rounded p-2 text-center">
                                        <i class="fas fa-truck text-blue-600 mb-1"></i>
                                        <p class="text-blue-700">运输中</p>
                                    </div>
                                    <div class="bg-yellow-50 rounded p-2 text-center">
                                        <i class="fas fa-box text-yellow-600 mb-1"></i>
                                        <p class="text-yellow-700">派送中</p>
                                    </div>
                                    <div class="bg-green-50 rounded p-2 text-center">
                                        <i class="fas fa-check text-green-600 mb-1"></i>
                                        <p class="text-green-700">已签收</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ml-13 mt-3">
                            <button onclick="practiceStep('track')" class="bg-purple-50 text-purple-600 text-xs px-3 py-1.5 rounded-lg hover:bg-purple-100 transition-colors">
                                物流查询
                            </button>
                        </div>
                    </div>

                    <!-- Flow Step 5 -->
                    <div class="workflow-step bg-white rounded-xl border border-gray-200 p-4">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3 mt-1">
                                <span class="text-green-600 font-bold text-sm">5</span>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-green-800 mb-2">售后服务</h4>
                                <div class="space-y-2 text-sm text-gray-600">
                                    <p>• 主动回访客户满意度</p>
                                    <p>• 处理退换货申请</p>
                                    <p>• 解决质量问题</p>
                                    <p>• 邀请客户评价</p>
                                </div>
                                <div class="bg-green-50 rounded-lg p-3 mt-3">
                                    <div class="flex items-center justify-between text-sm">
                                        <span class="text-green-700">7天无理由退换</span>
                                        <span class="text-green-600">15天质保服务</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ml-13 mt-3">
                            <button onclick="practiceStep('service')" class="bg-green-50 text-green-600 text-xs px-3 py-1.5 rounded-lg hover:bg-green-100 transition-colors">
                                售后模板
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    快捷操作
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="bulkProcess()" class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 text-center border border-blue-200 hover:border-blue-400 transition-all">
                        <i class="fas fa-layer-group text-2xl text-blue-600 mb-2"></i>
                        <p class="text-sm font-medium">批量处理</p>
                        <p class="text-xs text-gray-600 mt-1">同时处理多个订单</p>
                    </button>
                    <button onclick="printLabels()" class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl p-4 text-center border border-green-200 hover:border-green-400 transition-all">
                        <i class="fas fa-print text-2xl text-green-600 mb-2"></i>
                        <p class="text-sm font-medium">打印面单</p>
                        <p class="text-xs text-gray-600 mt-1">批量打印快递单</p>
                    </button>
                    <button onclick="messageTemplates()" class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 text-center border border-purple-200 hover:border-purple-400 transition-all">
                        <i class="fas fa-comments text-2xl text-purple-600 mb-2"></i>
                        <p class="text-sm font-medium">消息模板</p>
                        <p class="text-xs text-gray-600 mt-1">快速回复客户</p>
                    </button>
                    <button onclick="orderAnalytics()" class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-4 text-center border border-orange-200 hover:border-orange-400 transition-all">
                        <i class="fas fa-chart-bar text-2xl text-orange-600 mb-2"></i>
                        <p class="text-sm font-medium">订单分析</p>
                        <p class="text-xs text-gray-600 mt-1">查看处理数据</p>
                    </button>
                </div>
            </div>

            <!-- Common Issues -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    常见问题处理
                </h3>
                <div class="space-y-3">
                    <!-- Issue 1 -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3 cursor-pointer" onclick="toggleIssue('issue1')">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>
                                    <span class="font-medium text-sm">客户要求修改收货地址</span>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="issue1-arrow"></i>
                            </div>
                        </div>
                        <div id="issue1-content" class="hidden border-t border-gray-100 p-3 bg-gray-50">
                            <div class="space-y-2 text-sm text-gray-700">
                                <p class="font-medium text-red-700">处理方案：</p>
                                <p>1. 如果订单未发货，可直接修改地址</p>
                                <p>2. 已发货订单需联系快递公司修改</p>
                                <p>3. 无法修改时可申请退货重新下单</p>
                            </div>
                            <button onclick="viewSolution('address')" class="bg-red-50 text-red-600 text-xs px-3 py-1.5 rounded-lg mt-2 hover:bg-red-100 transition-colors">
                                详细方案
                            </button>
                        </div>
                    </div>

                    <!-- Issue 2 -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3 cursor-pointer" onclick="toggleIssue('issue2')">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-box-open text-orange-600 mr-3"></i>
                                    <span class="font-medium text-sm">商品损坏或缺少</span>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="issue2-arrow"></i>
                            </div>
                        </div>
                        <div id="issue2-content" class="hidden border-t border-gray-100 p-3 bg-gray-50">
                            <div class="space-y-2 text-sm text-gray-700">
                                <p class="font-medium text-orange-700">处理方案：</p>
                                <p>1. 要求客户提供损坏照片</p>
                                <p>2. 确认损坏程度和责任方</p>
                                <p>3. 提供补发或退款方案</p>
                                <p>4. 与物流公司协商赔偿</p>
                            </div>
                            <button onclick="viewSolution('damage')" class="bg-orange-50 text-orange-600 text-xs px-3 py-1.5 rounded-lg mt-2 hover:bg-orange-100 transition-colors">
                                处理流程
                            </button>
                        </div>
                    </div>

                    <!-- Issue 3 -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3 cursor-pointer" onclick="toggleIssue('issue3')">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-undo text-blue-600 mr-3"></i>
                                    <span class="font-medium text-sm">客户申请退款</span>
                                </div>
                                <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" id="issue3-arrow"></i>
                            </div>
                        </div>
                        <div id="issue3-content" class="hidden border-t border-gray-100 p-3 bg-gray-50">
                            <div class="space-y-2 text-sm text-gray-700">
                                <p class="font-medium text-blue-700">处理方案：</p>
                                <p>1. 了解退款原因</p>
                                <p>2. 根据政策判断是否符合条件</p>
                                <p>3. 需要时要求客户退货</p>
                                <p>4. 确认收到货品后处理退款</p>
                            </div>
                            <button onclick="viewSolution('refund')" class="bg-blue-50 text-blue-600 text-xs px-3 py-1.5 rounded-lg mt-2 hover:bg-blue-100 transition-colors">
                                退款政策
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Performance Tips -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    效率提升技巧
                </h3>
                <div class="space-y-3">
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-4 border border-green-200">
                        <div class="flex items-start">
                            <i class="fas fa-rocket text-green-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-green-800 mb-2">设置自动化规则</h4>
                                <p class="text-sm text-green-700 mb-2">配置自动确认、自动发货等规则，减少重复操作</p>
                                <button onclick="setupAutomation()" class="bg-green-600 text-white text-xs px-3 py-1.5 rounded-lg hover:bg-green-700 transition-colors">
                                    配置自动化
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl p-4 border border-blue-200">
                        <div class="flex items-start">
                            <i class="fas fa-mobile-alt text-blue-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-medium text-blue-800 mb-2">使用移动端处理</h4>
                                <p class="text-sm text-blue-700 mb-2">下载APP随时随地处理订单，不错过任何商机</p>
                                <button onclick="downloadApp()" class="bg-blue-600 text-white text-xs px-3 py-1.5 rounded-lg hover:bg-blue-700 transition-colors">
                                    下载APP
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="startPractice()" class="flex-1 bg-orange-600 text-white font-medium py-2.5 rounded-lg hover:bg-orange-700 transition-colors">
                    <i class="fas fa-play mr-2"></i>开始实操
                </button>
                <button onclick="downloadGuide()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-download"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // View order demo
        function viewOrderDemo() {
            window.location.href = 'b2b-video-tutorials.html?video=order-processing';
        }

        // Practice specific step
        function practiceStep(step) {
            const steps = {
                'receive': '订单接收演示',
                'confirm': '订单确认案例',
                'ship': '商品打包指南',
                'track': '物流跟踪查询',
                'service': '售后服务模板'
            };
            
            showToast(`正在加载${steps[step]}...`);
            setTimeout(() => {
                window.location.href = `b2b-order-practice.html?step=${step}`;
            }, 1000);
        }

        // Quick actions
        function bulkProcess() {
            window.location.href = 'b2b-bulk-order-process.html';
        }

        function printLabels() {
            window.location.href = 'b2b-print-labels.html';
        }

        function messageTemplates() {
            window.location.href = 'b2b-message-templates.html';
        }

        function orderAnalytics() {
            window.location.href = 'b2b-order-analytics.html';
        }

        // Toggle issue content
        function toggleIssue(issueId) {
            const content = document.getElementById(`${issueId}-content`);
            const arrow = document.getElementById(`${issueId}-arrow`);
            
            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                arrow.style.transform = 'rotate(180deg)';
            } else {
                content.classList.add('hidden');
                arrow.style.transform = 'rotate(0deg)';
            }
        }

        // View solution
        function viewSolution(type) {
            const solutions = {
                'address': 'b2b-address-solution.html',
                'damage': 'b2b-damage-solution.html',
                'refund': 'b2b-refund-policy.html'
            };
            
            if (solutions[type]) {
                window.location.href = solutions[type];
            }
        }

        // Setup automation
        function setupAutomation() {
            window.location.href = 'b2b-automation-settings.html';
        }

        // Download app
        function downloadApp() {
            if (confirm('下载商家管理APP？\n\n随时随地处理订单，提高工作效率')) {
                showToast('正在跳转到下载页面...');
                setTimeout(() => {
                    window.location.href = 'b2b-app-download.html';
                }, 1000);
            }
        }

        // Start practice
        function startPractice() {
            if (confirm('开始订单处理实操练习？\n\n系统将模拟真实订单场景')) {
                window.location.href = 'b2b-order-simulator.html';
            }
        }

        // Download guide
        function downloadGuide() {
            showToast('正在下载订单处理指南PDF...');
            setTimeout(() => {
                showToast('下载完成！');
            }, 2000);
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('订单处理指南已加载');
        });
    </script>
</body>
</html>